/* 重置样式 */

// 把我们所有标签的内外边距清零
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; //css3盒子模型
}
html,
body,
#app {
  height: 100%;
  font-size: 14px;
}

body {
  // CSS3 抗锯齿形 让文字显示的更加清晰
  -webkit-font-smoothing: antialiased;
  background: #fff;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Liberation Sans', 'PingFang SC', 'Microsoft YaHei',
    'Hiragino Sans GB', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti', SimHei, SimSun,
    'WenQuanYi Zen Hei Sharp', sans-serif;
}

// 标题样式不加粗
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

// em 和 i 斜体的文字不倾斜
em,
i {
  font-style: normal;
}

// 去掉li 的小圆点
li {
  list-style: none;
}

img {
  border: 0; // border 0 照顾低版本浏览器，如果图片外面包含了链接会有边框的问题
  vertical-align: middle; //取消图片底侧有空白缝隙的问题
}

a {
  color: #333;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  &:hover {
    color: #c81623;
  }
}

button {
  cursor: pointer;
}

button,
input {
  // "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好
  font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, '\5B8B\4F53', sans-serif;
  border: 0; // 默认有灰色边框我们需要手动去掉
  outline: none;
}

.hide,
.none {
  display: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

// 超出长度省略
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 清除浮动
.clearfix {
  zoom: 1;
  & {
    content: '.';
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    clear: both;
  }
}
.clear:after,
.clear:before {
  content: '';
  display: table;
}
.clear:after {
  clear: both;
}
